<!--
 * @Author: 码上talk|RC
 * @Date: 2020-12-16 09:42:31
 * @LastEditTime: 2021-01-22 14:24:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-admin/src/pages/goods/list.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="goods-list">
        <div class="gl-sort gl-block">
            <div class="gb-title">
                <span>商品检索</span>
            </div>
            <div class="gb-content">
                <div class="gs-left">
                    <div class="l-item">
                        <i-cascader
                            style="width: 100px"
                            :data="goodsEnum.goodsCategory"
                            :load-data="loadGoodsCategoryData"
                            :change-on-select="true"
                            placeholder="分类"
                            v-model="defaultValue.category"
                            @on-change="categoryChange"
                        ></i-cascader>
                    </div>
                    <div class="l-item">
                        <i-select
                            style="width: 100px"
                            v-model="defaultValue.brandId"
                            clearable
                            placeholder="品牌"
                            @on-change="brandChange"
                        >
                            <i-option
                                :key="key"
                                :value="item.value"
                                v-for="(item, key) in goodsEnum.goodsBrand"
                            >{{item.label}}</i-option>
                        </i-select>
                    </div>
                    <div class="l-item">
                        <i-date-picker
                            format="yyyy/MM/dd"
                            type="daterange"
                            placement="bottom-end"
                            placeholder="上架时间"
                            style="width: 150px"
                        ></i-date-picker>
                    </div>
                    <div class="l-item">
                        <i-input
                            style="width: 150px"
                            placeholder="商品名称/关键字"
                            clearable
                            v-model="defaultValue.keyword"
                            @on-change="keywordChange"
                        ></i-input>
                    </div>
                </div>
                <div class="gs-right">
                    <div class="r-item">
                        <i-button @click.native="resetParamsAndForm">重置</i-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="gl-toolbar gl-block">
            <div class="gb-title">
                <span>批量操作</span>
            </div>
            <div class="gb-content">
                <div class="t-left"></div>
                <div class="t-right">
                    <div class="r-action">
                        <div class="a-item">
                            <i-button @click.native="go('/goods/add')">新增商品</i-button>
                        </div>
                        <div class="a-item">
                            <i-button>下架</i-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gl-list">
            <i-table border :columns="columns" :data="tableData">
                <template slot-scope="{ row }" slot="cover">
                    <div class="table-cover">
                        <img-video-previewer :src="row.cover"></img-video-previewer>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="name">
                    <div class="table-name">
                        <p>{{row.name}}</p>
                        <p>品牌：华为</p>
                    </div>
                </template>
                <template slot="tag">
                    <div class="table-tag">
                        <div class="tt-item">
                            <span>新品</span>
                            <i-switch size="small" />
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div>
                        <i-button size="small" @click="go(`/goods/info?id=${row.id}`)">查看</i-button>
                        <i-button
                            style="marginLeft: 10px;"
                            size="small"
                            type="error"
                            @click="go(`/goods/info?id=${row.id}`)"
                        >下架</i-button>
                    </div>
                </template>
            </i-table>
        </div>
        <div class="gl-page">
            <div class="gp-left">
                <span>
                    共
                    <em>{{list.length}}</em>条数据
                </span>
            </div>
            <div class="gp-right">
                <i-page :total="pageTotal" />
            </div>
        </div>
    </div>
</template>


<script>
/*eslint-disable */
import api from '@/api'
import { fn } from '@/utils/fn'
import { Goods } from '@/model/goods'
import imgVideoPreviewer from '@/components/img-video-previewer'
export default {
    components: {
        imgVideoPreviewer
    },
    data() {
        return {
            goodsEnum: Goods.ENUM.init(),
            defaultValue: {
                category: [],
                brandId: null,
                keyword: ''
            },
            params: {
                pageIndex: 1,
                pageSize: 10
            },
            reqBody: {
                query: {

                },
                order: {}
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '编号',
                    key: 'id',
                    width: 100,
                },
                {
                    title: '商品图片',
                    slot: 'cover',
                    width: 140
                },
                {
                    title: '商品名称',
                    slot: 'name',
                    width: 400
                },
                {
                    title: '价格',
                    key: 'amount'
                },
                {
                    title: '排序',
                    key: 'order'
                },
                {
                    title: '库存',
                    key: 'stock'
                },
                {
                    title: '状态',
                    key: 'status'
                },
                {
                    title: '标签',
                    slot: 'tag'
                },
                {
                    title: '操作',
                    slot: 'action',
                    fixed: 'right',
                    width: 200
                }
            ],
            list: [
            ],
            pageTotal: 0,
            debounceGetGoodsList: fn.debounce(() => {
                this.resetGoodsList()
            })
        }
    },
    computed: {
        tableData() {
            return this.list.map(i => {
                return {
                    id: i['id'],
                    name: i['name'],
                    amount: i['amount'],
                    cover: i['cover'],
                    status: '出售中',
                    stock: 1000
                }
            })
        }
    },
    methods: {
        init() {
            Goods.ENUM.load().then(res => {
                this.goodsEnum = res
            })
            this.getGoodsList()
        },
        loadGoodsCategoryData(item, callback) {
            item.loading = true
            Goods.ENUM.lazyLoad('goodsCategory', {
                query: {
                    pId: item.value
                }
            }, { item, callback })
        },
        categoryChange(val) {
            if (!val.length) {
                return null
            }
            this.defaultValue['category'] = val
            this.value2reqBody()
            this.resetGoodsList()
        },
        brandChange(val) {
            this.defaultValue['brandId'] = val
            this.value2reqBody()
            this.resetGoodsList()
        },
        keywordChange(e) {
            this.defaultValue['keyword'] = e['target']['value']
            this.value2reqBody()
            this.debounceGetGoodsList()
        },
        value2reqBody() {
            this.reqBody['query']['categoryId'] = this.defaultValue['category'][this.defaultValue['category'].length - 1]
            this.reqBody['query']['brandId'] = this.defaultValue['brandId']
            this.reqBody['query']['keyword'] = this.defaultValue['keyword']
        },
        resetParamsAndForm() {
            this.$Modal.confirm({
                title: '重置提示',
                content: '确定重置检索条件？',
                onOk: () => {
                    this.defaultValue = {
                        category: [],
                        brandId: null,
                        keyword: ''
                    }
                    this.params = {
                        pageIndex: 1,
                        pageSize: 10
                    }
                    this.value2reqBody()
                    this.resetGoodsList()
                }
            })
        },
        resetGoodsList() {
            this.list = []
            this.getGoodsList()
        },
        getGoodsList() {
            Goods.API('list', { params: this.params, data: this.reqBody }).then(res => {
                const { data, page } = res
                const { total } = page
                this.list = [...data].map(i => new Goods(i))
                this.pageTotal = total
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.goods-list {
    padding: 10px;
    background: white;
    .gl-block {
        padding: 20px 0;
        .gb-title {
            position: relative;
            display: flex;
            align-items: center;
            height: 30px;
            padding-left: 20px;
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 3px;
                height: 100%;
                background: #1890ff;
            }
        }
        .gb-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
        }
    }
    .gl-sort {
        border-bottom: 1px solid #ebeef5;
        .gs-left {
            display: flex;
            align-items: center;
            .l-item {
                &:not(:first-child) {
                    margin-left: 10px;
                }
            }
        }
    }
    .gl-toolbar {
        .t-right {
            .r-action {
                display: flex;
                align-items: center;
                .a-item {
                    &:not(:first-child) {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .gl-list {
        .table-cover {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100px;
            padding: 10px;
        }
        .table-tag {
            .tt-item {
                display: flex;
                align-items: center;
                span {
                    padding-right: 10px;
                }
                &:not(:first-child) {
                    margin-top: 10px;
                }
            }
        }
    }
    .gl-page {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
    }
}
</style>
